// src/views/home/Index.tsx

import { getShopTotalNum, getUserTotalNum } from '@/api/home';
import { Col, Row, Statistic } from 'antd';
import  { FC, useEffect, useState } from 'react';
import CountUp from 'react-countup';
interface IAppProps {
}
const formatter: any = (value: number) => <CountUp end={value} separator="," />;
const Com: FC<IAppProps> = (props) => {
  const [usersLen, setUsersLen] = useState(0)
  const [prosLen, setProsLen] = useState(0)

  useEffect(() => {
    getUserTotalNum().then(res =>{
        setUsersLen(res.data.data)
    })
    getShopTotalNum().then(res => setProsLen(res.data.data))
  }, [])
  return (
    <div>
      <Row gutter={16}>
        <Col span={6}>
          <Statistic style = {{ backgroundColor: '#efefef', padding: "10px 20px"}} title="用户总数量" valueStyle={{ color: '#3f8600' }} value={usersLen} formatter={formatter} />
        </Col>
        <Col span={6}>
          <Statistic style = {{ backgroundColor: '#efefef', padding: "10px 20px"}} title="产品总数量" valueStyle={{ color: '#cf1322' }} value={prosLen} formatter={formatter} />
        </Col>
      </Row>
    </div>
  )
}

export default Com